<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/22
  Time: 16:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <meta name="applicable-device" content="pc">
    <meta name="mobile-agent" content="">
    <link rel="alternate" media="only screen and (max-width: 640px)"
          href="">
    <title>GO运动健身网 </title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="${pageContext.request.contextPath}/style/js/jquery.min.js" type="text/javascript"></script>
    <link href="${pageContext.request.contextPath}/playpage/playpage_files/global.css" rel="stylesheet">

    <%--<script src="${pageContext.request.contextPath}/playpage/playpage_files/hm.js.下载"></script>--%>

    <link href="${pageContext.request.contextPath}/playpage/playpage_files/jquery-ui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/playpage/playpage_files/video.css" rel="stylesheet">

    <!-- 评论的CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/playpage/style.css">

    <script>
        $(function () {

            var f =${empty sessionScope.user}
            console.log(f);
            var userId="${sessionScope.user.userId}";
            console.log(userId);


            /*判断是否登录*/
            if (!f) {
                /*如果已登录显示可用的加入训练按钮*/
                $.get("${pageContext.request.contextPath}/FavoriteOfController/checkFavorite",
                    {userId:userId, videoId:${requestScope.video.videoId}}, function (data) {
                        showJoinButton(data);
                    }, "json");

                console.log("加入历史记录之前");

                /*加入历史记录*/
                $.get("${pageContext.request.contextPath}/HistoryOfController/deleteHistory",
                    {userId: userId, videoId:${requestScope.video.videoId}}, function (data) {

                        $.get("${pageContext.request.contextPath}/HistoryOfController/addHistory",
                            {userId: userId, videoId:${requestScope.video.videoId}}, function (data) {
                            }, "json");

                    }, "json");

            } else {
                /*如果未登录显示跳转登录页的按钮*/
                $("#joinButton").empty();
                $("#joinButton").append("<a href=\"${pageContext.request.contextPath}/login/userLogin.jsp\" id=\"join-login\" data-id=\"3\"\n" +
                    "                                   class=\"ui-button get-in\" >加入训练</a>");
            }


            /*获取评论数据*/
            $.get("${pageContext.request.contextPath}/CommentOfController/getCommentByVideoId",
                {videoId:${requestScope.video.videoId}}, function (data) {
                    console.log(data);
                    showComment(data,userId);
                }, "json");

            $.get("${pageContext.request.contextPath}/SecondTypeNameController/showSecondTypeOnPlay",
                {videoId:${requestScope.video.videoId}}, function (data) {
                    $("span:contains('目标：')").text("目标：" + data[0]);
                    $("span:contains('部位：')").text("部位：" + data[1]);
                    $("span:contains('强度：')").text("强度：" + data[2]);
                    $("span:contains('器械：')").text("器械：" + data[3]);
                }, "json");

            /*加入训练按钮*/
            $(document).on("click", "#join-course", function () {

                $.get("${pageContext.request.contextPath}/FavoriteOfController/joinExercise",
                    {userId: userId, videoId:${requestScope.video.videoId}}, function (data) {
                        if (data == true) {
                            $("#joinButton").empty();
                            $("#joinButton").append("<a href=\"javascript:void(0)\" id=\"join-exit\" data-id=\"4\"\n" +
                                "                                   class=\"ui-button get-in\">取消加入</a>")
                        }
                    }, "json");

            })

            /*取消加入按钮*/
            $(document).on("click", "#join-exit", function () {
                $.get("${pageContext.request.contextPath}/FavoriteOfController/exitExercise",
                    {userId:userId, videoId:${requestScope.video.videoId}}, function (data) {
                        if (data == true) {
                            $("#joinButton").empty();
                            $("#joinButton").append("<a href=\"javascript:void(0)\" id=\"join-course\" data-id=\"3\"\n" +
                                "                                   class=\"ui-button get-in\" >加入训练</a>")
                        }
                    }, "json");
            })

            /*点击选择回复*/
            $(document).on("click", ".reply", function () {
                var a = $(this).css("background-color");
                if (a == "rgb(255, 0, 0)") {
                    var p = $(this).parent();
                    $(this).parent().empty();
                    p.append("<a href=\"javascript:void(0)\" class=\"reply\">回复</a>");
                    $("#commentStyle").text("发表评论");
                } else {
                    $(this).css("background-color", "red");
                    $(this).addClass("red");
                    $("#commentStyle").text("回复");
                    console.log($(this).attr("class"));
                }

            })

            /*点击删除评论*/
            $(document).on("click", ".deleteB", function () {
                var getCommentId = $(this).attr("id");
                $.get("${pageContext.request.contextPath}/CommentOfController/deleteComment",
                    {commentId: getCommentId}, function (data) {

                        $.get("${pageContext.request.contextPath}/CommentOfController/getCommentByVideoId",
                            {videoId:${requestScope.video.videoId}}, function (data) {
                                showComment(data,userId);
                            }, "json");

                    }, "json");
            })

            /*点击提交评论*/
            $(document).on("click", "#publish", function () {

                /*判断是否登录*/
                if (!f) {

                    var commentContent = $("#message").val();
                    var cs = $("#commentStyle").text();
                    $("#message").val("");

                    if (cs == "发表评论") {
                        $.get("${pageContext.request.contextPath}/CommentOfController/addComment",
                            {
                                userId: userId,
                                videoId:${requestScope.video.videoId},
                                commentContent: commentContent
                            }, function (data) {

                                $.get("${pageContext.request.contextPath}/CommentOfController/getCommentByVideoId",
                                    {videoId:${requestScope.video.videoId}}, function (data) {
                                        showComment(data,userId);
                                    }, "json");

                            }, "json");
                    }

                    if (cs == "回复") {

                        var getReplyId = $("a[class='reply red']").attr("id");
                        console.log(getReplyId);
                        $.get("${pageContext.request.contextPath}/CommentOfController/reply",
                            {
                                userId: userId,
                                videoId:${requestScope.video.videoId},
                                commentContent: commentContent,
                                replyId: getReplyId
                            }, function (data) {

                                $.get("${pageContext.request.contextPath}/CommentOfController/getCommentByVideoId",
                                    {videoId:${requestScope.video.videoId}}, function (data) {
                                        showComment(data,userId);
                                    }, "json");

                            }, "json");

                    }

                } else {
                    window.location.href = "${pageContext.request.contextPath}/login/userLogin.jsp"
                }

            })


        })

        function showJoinButton(data) {
            $("#joinButton").empty();
            if (data == true) {
                $("#joinButton").append("<a href=\"javascript:void(0)\" id=\"join-exit\" data-id=\"4\"\n" +
                    "                                   class=\"ui-button get-in\">取消加入</a>")
            } else {
                $("#joinButton").append("<a href=\"javascript:void(0)\" id=\"join-course\" data-id=\"3\"\n" +
                    "                                   class=\"ui-button get-in\" >加入训练</a>")
            }
        }

        function showComment(data,userId) {
            $("#commentList").empty();
            $.each(data, function (index, commentGroup) {
                var time = commentGroup.comment.commentTime;
                var formatTime = time.replace(".0", "");

                if (commentGroup.comment.user.userId == userId) {
                    if (commentGroup.replyComment != null) {

                        var rTime = commentGroup.replyComment.commentTime;
                        var formatRTime = time.replace(".0", "")

                        $("#commentList").append("<li class=\"single_comment_area\" style=\"background-color: gray\">\n" +
                            "  <span style=\"color: red\">引用</span>" +
                            "         <!-- Comment Content -->\n" +
                            "       <div class=\"comment-content d-flex\" style=\"height:51px\">\n" +
                            "        <div class=\"comment-author\">\n" +
                            "  <img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+commentGroup.replyComment.user.userImg+"\" alt=\"author\">\n" +
                            "  </div>\n" +
                            "      <!-- Comment Meta -->\n" +
                            "      <div class=\"comment-meta\">\n" +
                            "     <a href=\"#\" class=\"comment-date\"></a>\n" +
                            "      <h6>" + commentGroup.replyComment.user.userName + "</h6>\n" +
                            "     <p>" + commentGroup.replyComment.commentContent + "</p>\n" +
                            "    <div class=\"d-flex align-items-center\" >\n" +

                            "       </div>\n" +
                            "     </div>\n" +
                            "     </div>\n" +
                            "\n" +
                            "  <ol class=\"children\" style=\"background-color: black\">\n" +
                            "  <li class=\"single_comment_area\">\n" +
                            "  <!-- Comment Content -->\n" +
                            " <div class=\"comment-content d-flex\">\n" +
                            "  <!-- Comment Author -->\n" +
                            "   <div class=\"comment-author\">\n" +
                            "   <img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+commentGroup.replyComment.user.userImg+"\" alt=\"author\">\n" +
                            "   </div>\n" +
                            "  <div class=\"comment-meta\">\n" +
                            "  <a href=\"#\" class=\"comment-date\">" + formatRTime + "</a>\n" +
                            "   <h6>" + commentGroup.comment.user.userName + "</h6>\n" +
                            "   <p>" + commentGroup.comment.commentContent + "</p>\n" +
                            "  <div class=\"d-flex align-items-center\">\n" +
                            "     <a href=\"javascript:void(0)\" class=\"reply\" id=\"" + commentGroup.comment.commentId + "\">回复</a>\n" +
                            "     <a href=\"javascript:void(0)\" class=\"deleteB\" id=\"" + commentGroup.comment.commentId + "\">删除</a>\n" +
                            "  </div>\n" +
                            "  </div>\n" +
                            "  </div>\n" +
                            "   </li>\n" +
                            "  </ol>\n" +
                            "    </li>");

                    } else {
                        $("#commentList").append("<li class=\"single_comment_area\">\n" +
                            "               <!-- Comment Content -->\n" +
                            "     <div class=\"comment-content d-flex\">\n" +
                            "         <!-- Comment Author -->\n" +
                            "       <div class=\"comment-author\">\n" +
                            "   <img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+commentGroup.comment.user.userImg+"\" alt=\"author\">\n" +
                            "        </div>\n" +
                            "     <div class=\"comment-meta\">\n" +
                            "    <a href=\"#\" class=\"comment-date\">" + formatTime + "</a>\n" +
                            "    <h6>" + commentGroup.comment.user.userName + "</h6>\n" +
                            "   <p>" + commentGroup.comment.commentContent + "</p>\n" +
                            "     <div class=\"d-flex align-items-center\" >\n" +
                            "   <a href=\"javascript:void(0)\" class=\"reply\" id=\"" + commentGroup.comment.commentId + "\">回复</a>\n" +
                            "  <a href=\"javascript:void(0)\" class=\"deleteB\" id=\"" + commentGroup.comment.commentId + "\">删除</a>\n" +
                            "      </div>\n" +
                            "     </div>\n" +
                            "     </div>\n" +
                            "      \n" +
                            "    </li>");
                    }
                } else {

                    if (commentGroup.replyComment != null) {

                        var rTime = commentGroup.replyComment.commentTime;
                        var formatRTime = time.replace(".0", "")

                        $("#commentList").append("<li class=\"single_comment_area\" style=\"background-color: gray\">\n" +
                            "  <span style=\"color: red\">引用</span>" +
                            "         <!-- Comment Content -->\n" +
                            "       <div class=\"comment-content d-flex\" style=\"height:51px\">\n" +
                            "        <div class=\"comment-author\">\n" +
                            "  <img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+commentGroup.replyComment.user.userImg+"\" alt=\"author\">\n" +
                            "  </div>\n" +
                            "      <!-- Comment Meta -->\n" +
                            "      <div class=\"comment-meta\">\n" +
                            "     <a href=\"#\" class=\"comment-date\"></a>\n" +
                            "      <h6>" + commentGroup.replyComment.user.userName + "</h6>\n" +
                            "     <p>" + commentGroup.replyComment.commentContent + "</p>\n" +
                            "    <div class=\"d-flex align-items-center\" >\n" +

                            "       </div>\n" +
                            "     </div>\n" +
                            "     </div>\n" +
                            "\n" +
                            "  <ol class=\"children\" style=\"background-color: black\">\n" +
                            "  <li class=\"single_comment_area\">\n" +
                            "  <!-- Comment Content -->\n" +
                            " <div class=\"comment-content d-flex\">\n" +
                            "  <!-- Comment Author -->\n" +
                            "   <div class=\"comment-author\">\n" +
                            "   <img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+commentGroup.replyComment.user.userImg+"\" alt=\"author\">\n" +
                            "   </div>\n" +
                            "  <div class=\"comment-meta\">\n" +
                            "  <a href=\"#\" class=\"comment-date\">" + formatRTime + "</a>\n" +
                            "   <h6>" + commentGroup.comment.user.userName + "</h6>\n" +
                            "   <p>" + commentGroup.comment.commentContent + "</p>\n" +
                            "  <div class=\"d-flex align-items-center\">\n" +
                            "     <a href=\"javascript:void(0)\" class=\"reply\" id=\"" + commentGroup.comment.commentId + "\">回复</a>\n" +
                            "  </div>\n" +
                            "  </div>\n" +
                            "  </div>\n" +
                            "   </li>\n" +
                            "  </ol>\n" +
                            "    </li>");

                    } else {
                        $("#commentList").append("<li class=\"single_comment_area\">\n" +
                            "               <!-- Comment Content -->\n" +
                            "     <div class=\"comment-content d-flex\">\n" +
                            "         <!-- Comment Author -->\n" +
                            "       <div class=\"comment-author\">\n" +
                            "   <img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+commentGroup.comment.user.userImg+"\" alt=\"author\">\n" +
                            "        </div>\n" +
                            "     <div class=\"comment-meta\">\n" +
                            "    <a href=\"#\" class=\"comment-date\">" + formatTime + "</a>\n" +
                            "    <h6>" + commentGroup.comment.user.userName + "</h6>\n" +
                            "   <p>" + commentGroup.comment.commentContent + "</p>\n" +
                            "     <div class=\"d-flex align-items-center\" >\n" +
                            "   <a href=\"javascript:void(0)\" class=\"reply\" id=\"" + commentGroup.comment.commentId + "\">回复</a>\n" +
                            "      </div>\n" +
                            "     </div>\n" +
                            "     </div>\n" +
                            "      \n" +
                            "    </li>");
                    }

                }


            })


        }


    </script>
</head>
<body>
<div class="o-hiyd">
    <script>
        SITE_URL = "/";
    </script>
    <script src="${pageContext.request.contextPath}/playpage/playpage_files/seajs.utils.js.下载"></script>
    <div class="o-header2">
        <div class="o-header2_inner">
            <a href="https://www.hiyd.com/" class="o-header_logo">
                <img src="${pageContext.request.contextPath}/playpage/playpage_files/logo3.png">
            </a>

            <div class="o-header2-nav">
            </div>

            <div class="o-header_ctrl">
            </div>
        </div>
    </div>
    <!-- <div class="o-hiyd-header">
hi运动头部
</div> -->
    <div class="o-exercise page o-course-detail" id="o-exercise">
        <div class="o-exercise-main">
            <div class="expand-mask" style="display:block;"></div>
            <div class="o-video2">
                <!-- 面包屑导航{ -->
                <!-- <div class="mod-crumbs">
                <span>当前位置：</span><a class="back-to-index" href="/dongzuo/">健身库</a><span class="arrow">»</span><b>脂肪燃烧者 - 中级</b>
            </div> -->
                <!-- }面包屑导航 -->

                <!-- 视频播放{ -->
                <div class="o-video-video expand" data-isjoin="0">
                    <div class="o-video-player expand" id="videoPlayer">
                        <div class="o-video-player-main2">
                            <div class="video-player">
                                <div class="video-wrap">
                                    <div class="video-con mainPlayer jp-video-270p">
                                        <!-- S 主视频播放器 -->
                                        <div id="mainVideo" class="jp-jplayer"
                                             style="width: 100%; height: 100%;">


                                            <video id="jp_video_0" preload="auto" width="960" height="600" controls>
                                                <source src="${pageContext.request.contextPath}/VideoDownload?fName=${requestScope.video.videoPath}"
                                                        type="video/mp4"/>
                                            </video>
                                        </div>
                                        <!-- E 主视频播放器 -->

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- }视频播放 -->

                <div class="o-video-bd main">
                    <div class="o-course-intro">
                        <div class="o-course-intro-hd">
                            <h3></h3>
                            <div class="m-share-list" id="oshop-shareBar">

                                <a href="" class="share-handler">我要分享</a>
                                <div class="share-menu">
                                    <ul>
                                        <li><a data-role="weibo" class="weibo">新浪微博</a></li>
                                        <li><a data-role="qq-zone" class="qzone">QQ空间</a></li>
                                        <li><a data-role="wechat" class="wechat">微信</a></li>
                                        <li><a data-role="qq" class="qq">QQ</a></li>
                                    </ul>
                                </div>

                            </div>

                            <!-- 训练参与人数{ -->
                            <div class="join-num">

                            </div>
                            <!-- }训练参与人数 -->
                        </div>
                        <div class="o-course-intro-bd">
                            <ul>
                                <li><span class="label">目标：</span></li>
                                <li><span class="label">部位：</span></li>
                                <li><span class="label">强度：</span></li>
                                <br>
                                <li><span class="label">器械：</span></li>
                                <li><span class="label">日均：</span>19分</li>
                                <li><span class="label">总消耗：</span>873卡</li>
                            </ul>
                            <div id="joinButton">
                                <%--                                <a href="javascript:void(0)" id="join-course" data-id="4"--%>
                                <%--                                   class="ui-button get-in">加入训练</a>--%>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 视频模板侧栏样式{ -->
                <div class="o-video-aside expand" style="height: 300px">
                    <div class="aside-hd">
                        <h2>${requestScope.video.courseName}</h2>
                        <p>${requestScope.video.videoIntroduce}</p>
                    </div>
                </div>
                <!-- }视频模板侧栏样式 -->


                <!-- 评论 -->
                <section class="post-details-area mb-80" style="background-color: black">

                    <div class="container">



                        <div class="row justify-content-center">
                            <!-- Post Details Content Area -->
                            <div class="col-12 col-lg-8 col-xl-7">
                                <div class="post-details-content">
                                    <!-- Blog Content -->
                                    <div class="blog-content">
                                        <!-- Comment Area Start -->
                                        <div class="comment_area clearfix mb-50">




                                            <!-- 发布评论框 -->
                                            <div class="post-a-comment-area">

                                                <!-- Section Title -->
                                                <div class="section-heading style-2">
                                                    <h4 id="commentStyle">发表评论</h4>
                                                    <div class="line"></div>
                                                </div>

                                                <!-- 发布评论 -->
                                                <div class="contact-form-area">
                                                    <form action="#" method="post">
                                                        <div class="row">
                                                            <div class="col-12">
													<textarea name="message" class="form-control" id="message"
                                                              placeholder="请在这里输入文字"
                                                              style="background-color: white;"></textarea>
                                                            </div>
                                                            <div class="col-12">
                                                                <a class="btn vizew-btn mt-30" style="color: white" id="publish">点 击 发 布</a>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                            <!-- 发布评论框 -->

                                            <!-- Section Title -->
                                            <div class="section-heading style-2">
                                                <h3>评论</h3>
                                                <div class="line"></div>
                                            </div>

                                            <div style="overflow: auto;height: 810px">

                                                <!-- 评论-->
                                                <ul id="commentList">
                                                    <%--<!-- Single Comment Area -->
                                                    <li class="single_comment_area">
                                                        <!-- Comment Content -->
                                                        <div class="comment-content d-flex">
                                                            <!-- Comment Author -->
                                                            <div class="comment-author">
                                                                <img src="${pageContext.request.contextPath}/playpage/img/bg-img/31.jpg" alt="author">
                                                            </div>
                                                            <!-- Comment Meta -->
                                                            <div class="comment-meta">
                                                                <a href="#" class="comment-date">27 Aug 2019</a>
                                                                <h6>姓名</h6>
                                                                <p>评论</p>
                                                                <div class="d-flex align-items-center" >
                                                                    <a href="javascript:void(0)" class="reply" >回复</a>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <ol class="children">
                                                            <li class="single_comment_area">
                                                                <!-- Comment Content -->
                                                                <div class="comment-content d-flex">
                                                                    <!-- Comment Author -->
                                                                    <div class="comment-author">
                                                                        <img src="${pageContext.request.contextPath}/playpage/img/bg-img/32.jpg" alt="author">
                                                                    </div>
                                                                    <!-- Comment Meta -->
                                                                    <div class="comment-meta">
                                                                        <a href="#" class="comment-date">27 Aug 2019</a>
                                                                        <h6>姓名</h6>
                                                                        <p>评论</p>
                                                                        <div class="d-flex align-items-center">
                                                                            <a href="javascript:void(0)" class="reply">回复</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ol>
                                                    </li>--%>


                                                </ul>
                                                <!--评论-->

                                            </div>

                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </section>
                <!-- 评论 -->


            </div>
        </div>
    </div>


    <div class="o-hiyd-footer">

        <div class="o-footer-row">
            <a class="footer-nav-link" href="javascript:;" target="_blank">关于我们</a>|
            <a class="footer-nav-link" href="" target="_blank">网站地图</a>|
            <a class="footer-nav-link" href=""
               target="_blank">手机版本</a>|

            <span>Copyright (C) 2021  版权所有 </span>
        </div>
        <div class="o-footer-row">
            <span>（2021）1655-286号</span> | <a href="http://www.beian.miit.gov.cn/">ICP备21035085号-3</a>
        </div>

    </div>

</div>
</body>
</html>
